import React, { Component } from "react";
// 只有类组件可以定义自己的状态(state)

class App extends Component {
  // 定义state有两种方式
  // 1. 使用构造函数的构造器进行定义
  // constructor() {
  //   // 在constructor里面需要先调用super方法才能使用this
  //   super();
  //   this.state = {
  //     name: "xiaohua",
  //     age: 20,
  //   };
  // }

  // 2. 使用属性初始化器
  state = {
    name: "xiaohua",
    age: 20,
    title: "这是标题",
    show: false,
    // arr: [<li>1</li>, <li>2</li>, <li>3</li>, <li>4</li>, <li>5</li>],
    arr: [1, 2, 3, 4, 5],
  };

  render() {
    const { name, age, title, show, arr } = this.state;
    return (
      <>
        <h2>state状态</h2>
        <p>name: {name}</p>
        <p>age: {age}</p>
        {/* 添加属性的时候，如果使用了变量(大括号)，不能用引号 */}
        <p title={title}>hello</p>

        {/* 条件渲染需要使用三目或者短路运算 */}
        {/* {show ? <p>你看到我了</p> : null} */}
        {show && <p>你看到我了</p>}
        {/* <p style={{ display: show ? "block" : "none" }}>你看到我了</p> */}

        {/* 循环渲染 */}
        <ul>
          {arr.map((item, index) => {
            return <li key={index}>{item}</li>;
          })}
        </ul>
      </>
    );
  }
}

export default App;
